<template>
  <div class="distributionBasket">
    <el-button type="primary" @click="handleAdd">新增配送员</el-button>
    <div class="distributionTable">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="姓名" width="auto">
        </el-table-column>
        <el-table-column prop="phone" label="手机号" width="auto">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="auto">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row, scope.$index)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row, scope.$index)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 新增弹出层 -->
      <el-dialog title="编辑/新增" :visible.sync="dialogFormVisible">
        <el-form :model="markiForm">
          <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-input v-model="markiForm.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="手机号" :label-width="formLabelWidth">
            <el-input v-model="markiForm.phone" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogdeliverAdd">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
// 导入的其他文件 例如：import moduleName from 'modulePath';
import { deliverList, deliverAdd, deliverDelete } from "@/api/distribution";
export default {
  //import所引入的组件注册
  components: {},

  data() {
    return {
      dialogTableVisible: false,
      dialogFormVisible: false,
      tableData: [],
      id: "",
      stash: 0,
      value: "",
      formLabelWidth: "100px",
      markiForm: {
        name: "",
        phone: ""
      }
    };
  },

  //监听属性
  computed: {},

  //监控data中的数据变化
  watch: {},

  //方法集合
  methods: {
    //新增弹出层
    handleAdd() {
      this.stash = 0;
      this.dialogFormVisible = true;
      this.markiForm = {};
    },
    //新增
    dialogdeliverAdd() {
      let stash = this.stash;
      this.dialogFormVisible = false;
      this.stash = 0;
      let id = this.id;
      if (stash == 0) {
        deliverAdd(this.markiForm.name, this.markiForm.phone, this.id).then(
          res => {
            this.markiList();
          }
        );
      } else {
        let id = this.id;
        deliverAdd(this.markiForm.name, this.markiForm.phone, id).then(res => {
          console.log(res);
          this.id = "";
          this.markiList();
        });
      }
    },
    //编辑回显
    handleEdit(row) {
      console.log(row);
      this.dialogFormVisible = true;
      this.markiForm.name = row.name;
      this.markiForm.phone = row.phone;
      this.stash = 1;
      this.id = row.id;
    },
    //配送员列表
    markiList() {
      deliverList().then(res => {
        console.log(res);
        this.tableData = res.rows;
      });
    },
    //配送员删除
    handleDelete(row, $index) {
      this.$confirm("你确定要删除吗, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          deliverDelete(row.id).then(res => {
            this.tableData.splice($index, 1);
          });
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  },

  //生命周期 - 组件实例刚被创建
  beforeCreate() {},
  //创建完成 访问当前this实例
  created() {
    this.markiList();
  }
};
</script>
<style lang="scss" scoped>
.distributionBasket {
  padding: 20px;
  .distributionTable {
    margin-top: 20px;
  }
}
</style>
